<div th:fragment="main-header">
    <!-- Header -->
    <header id="main-header">
        <div class="container">
            <div class="main-head">
                <div class="left-side">
                    <div class="logo"><a href="/web/common/index"><img th:src="@{/assets/images/logo.png}" alt=""
                                                                       width="150px"></a>
                        <!--                    <div class="logo"><a href="index"><img src="/material/banner/test.png" alt="" width="150px"></a>-->

                    </div>
                    <nav class="navigation">
                        <ul>
                            <li><a href="/web/common/index">主页</a></li>
                            <li><a href="/web/project_list_grid">发现项目</a></li>
                            <li><a id="Tocreate">发布项目</a></li>
                            <li id="goToAdmin" class="hidden" ><a href="/web/user/project/list">项目管理</a></li>
                            <li><a href="/web/common/aboutUs">关于我们</a></li>

                        </ul>
                    </nav>
                </div>
                <div class="right-side">
                    <div class="cs-search-block">
                        <input type="text" id="headerKeyWord" name="headerKeyWord" placeholder="搜索项目"
                               onfocus="if(this.placeholder =='搜索项目') { this.placeholder = ''; }"
                               onblur="if(this.placeholder == '') { this.placeholder ='搜索项目'; }" class="form-control">
                        <label>
                            <input type="submit" value="Search" id="Search">
                        </label>
                    </div>
                    <div class="profile-view">
                        <ul>
                            <li id="no_user">
                                <a href="/web/common/login?type=login" class="h"
                                   style="color: #f22e00"><span>亲,请登录</span></a><a
                                    href="/web/common/login?type=register" class="h"
                                    style="color: #6C6C6C"><span>免费注册</span></a>
                            </li>
                            <li id="have_user" class="hidden">
                                <img id="user-avatar" alt="#" width="50px"
                                     style="border-radius:25px">
                                <i class="icon-arrow-down8"></i>
                                <div class="dropdown-area">
                                    <h5 id="user-name">用户名</h5>
                                    <!--                                    <span>Member Since May 20, 2014</span>-->
                                    <ul class="dropdown">
                                        <!--                                        <li><a id="user-info" href="/web/user/info/edit"><i class="icon-flag5"></i>管理个人信息</a>-->
                                        <li><a id="user-info"><i class="icon-flag5"></i>管理个人信息</a>
                                        </li>
                                        <li><a id="user-order" href="/web/user/order/list" target="_blank"><i
                                                class="icon-file-text-o"></i>管理个人订单</a></li>
                                        <li id="user-project-li" class="hidden"><a id="user-project" href="/web/user/project/list" target="_blank"><i
                                                class="icon-file-text-o"></i>管理个人项目</a></li>
                                        <li><a id="user-collection" href="/web/user/collection/list" target="_blank"><i
                                                class="icon-file-text-o"></i>我的收藏</a>
                                        </li>
                                    </ul>
                                    <a class="sign-btn" data-th-href="@{/logout}"><i class="icon-logout"></i>退出登录</a>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="mob-nav"></div>
            </div>
        </div>
    </header>
    <!-- Header -->
    <script th:inline="javascript">
        layui.use(['jquery', 'form', 'upload', 'layedit'], function () {
            let $ = layui.jquery,
                $view = $("#main-header");
            let currentUser = [[${user}]];
            var needEdit = [[${needEdit}]];
            $("#user-info").click(function () {
                //Ajax获取
                $.get('/web/user/info/edit', {}, function (str) {
                    layer.open({
                        type: 1
                        , content: str //注意，如果str是object，那么需要字符拼接。
                        , title: ["个人信息", "text-align: center;"]
                        , resize: false
                        , scrollbar: false
                        , area: $(window).width() <= 750 ? '90%' : '50%'
                        , btn: ['提交', '取消']
                        , yes: function (index, layero) {
                            $('#ep-user-info').find('#submit').trigger('click');
                        }
                        , btn2: function () {
                            layer.closeAll();
                        }
                    });
                });
            })

            $(function () {
                if (currentUser != null) {
                    currentUser.roleSet = [[${roles}]];
                    currentUser.permissionSet = [[${permissions}]];
                    $view.find("#have_user").removeClass("hidden");
                    $view.find("#no_user").addClass("hidden")
                    initUserInfo();
                }
            })


            function initUserInfo() {
                $view.find("#user-avatar").attr('src', currentUser.avatar).end()
                    .find("#user-name").text(currentUser.realName);

                if (currentUser.realName == null) {
                    $view.find("#user-name").text("");
                }
                if (currentUser.isCreate != null && currentUser.isCreate == 1){
                    $view.find("#user-project-li").removeClass("hidden")
                }
                if (currentUser != null) {
                    if (currentUser.isCreate == "1") {
                        $("#goToAdmin").removeClass("hidden")
                    }
                    if (currentUser.isAdmin == "1") {
                        $("#goToAdmin").removeClass("hidden")
                    }
                }
            }

            $("#Search").click(function () {
                var keyWord = $("#headerKeyWord").val();
                window.location.href = "/web/project_list_grid?keyWord=" + keyWord
            })
            $("#Tocreate").click(function () {
                if (needEdit) {
                    var conIndex = layer.confirm("请先完善个人信息", function () {
//Ajax获取
                        $.get('/web/user/info/edit', {}, function (str) {
                            layer.open({
                                type: 1
                                , content: str //注意，如果str是object，那么需要字符拼接。
                                , title: ["个人信息", "text-align: center;"]
                                , resize: false
                                , scrollbar: false
                                , area: $(window).width() <= 750 ? '90%' : '50%'
                                , btn: ['提交', '取消']
                                , yes: function (index, layero) {
                                    $('#ep-user-info').find('#submit').trigger('click');
                                }
                                , btn2: function () {
                                    layer.closeAll();
                                }
                            });
                        });
                        layer.close(conIndex);
                    })
                } else {
                    window.location.href = "/web/createProject";
                }
            })
        })

    </script>
</div>